{% extends "common/layout.html" %}
        
{% block css%}
<style type="text/css">
    body{
        background-image:url(../../static/images/login.jpg);
        background-size: 1920px 1080px;
        background-repeat: no-repeat;
        background-position: top center;
        min-width: 1000px;
        min-height: 768px;
        /*height: 100%;*/
        position: relative;
    }
    body>.container{
        margin:0 auto;
        position: static;
        background-image: none;
    }
    .alert-warning:first-child{
        margin-top:15px;
    }
    .alert-warning{
        box-sizing:border-box;
        position: absolute;
        width:350px;
        height: 60px;
        right: 350px;
        top:auto;
        left: auto;
        bottom: 350px;
        padding: 3px;
        background: none;
        border: none;
        color: red;
    }
    .alert .close{
        display: none;
    }
    .container{
        padding: 70px 15px 0;
    }    
    .m-form{
        display: block;
        padding-top: 0;
        position: absolute;
        left:50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
    }
    .first{
        position: relative;
    }
    .first h2{
        color: #fff;
        font-size: 24px;
        font-weight: normal;
        text-align: center;
        margin-bottom: 30px;
    }
    form{
        box-sizing:border-box;
        border-radius: 5px;
    }
    form .form-group{
        margin:15px 0 !important;
    }
    form input.form-control{
        background: rgba(255,255,255,0.5);
        border:1px solid #999;
        width:350px;
        font-size: 16px;
        border-radius: 0;
    }
    form img{
        width:350px;
        margin-bottom: 50px;
    }
    input::-webkit-input-placeholder {
        color:#666 !important;
    }
    input::-moz-placeholder{
         color:#58b121 !important;
    }
    input:-ms-input-placeholder{
         color:#58b121 !important;
    }
    #sendVerify{
        position: absolute;
        right: -140px;
        top: 0;
        margin-top: 2px;
    }
    .auto-login{
        color: #f4f4f4;
        margin-top: -6px;
    }
    .auto-login input{
        margin-right: 6px;
    }
    .first{
        display: block;
    }
    .loading-part{
        margin: 0 auto 30px;
        height: 26px;
        width: 26px;
    }
    .loading{
        display: none;
        height: 26px;
        width: 26px;
        border-left: 3px solid #fff;
        border-top:3px solid #999;
        border-bottom:3px solid #999;
        border-right:3px solid #999;
        border-radius: 50%;
        animation:round 0.8s infinite linear;
        -webkit-animation:round 0.8s infinite linear;
        -o-animation:round 0.8s infinite linear;
        -ms-animation:round 0.8s infinite linear;
        -moz-animation:round 0.8s infinite linear;
    }
    @keyframes round{
        from{
            -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
        }
        to{
            -webkit-transform:rotate(360deg);
            transform:rotate(360deg);
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="m-form">
        <div class="first" id="first">
            <h2>{{translate('修改密码')}}</h2>
            <div class="loading-part">
                <div class="loading"></div>
            </div>
            <form id="form" class="form-horizontal" method="post">
                <div class="form-group">
                    <input type="text" id="sCode" class="form-control" placeholder="{{translate('请输入机构代码')}}">
                </div>
                <div class="form-group" style="position: relative;">
                    <input type="text" id="phone" class="form-control" placeholder="{{translate('请输入手机号')}}">
                    <button class="btn-sm" id="sendVerify">{{translate('发送验证码')}}</button>
                </div>
                <div class="form-group">
                    <input type="text" id="verify" class="form-control" placeholder="{{translate('请输入6位验证码')}}">
                </div>
                <div class="form-group">
                    <input type="password" id="pass" class="form-control" placeholder="{{translate('请输入新密码')}}">
                </div>
                <div class="form-group">
                    <input type="password" id="rePass" class="form-control" placeholder="{{translate('请再次输入新密码')}}">
                </div>
                <p style="color: #ff4c4c">{{translate('*老师帐号找回密码请联系机构管理员')}}</p>
                <div class="form-group">
                    <button class="btn-sm btn-done" id="done">{{translate('完 成')}}</button>
                    <button class="btn-sm btn-done" id="cancel">{{translate('取 消')}}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block footer %}
{% endblock %}

{% block js %}
<script>
    sessionStorage.clear();
    var countDown = 60;
    var isCounting = false;
    var t,vt;

    function setTime(val){
      if(isCounting){
          val.attr('disabled','disabled');
          val.addClass('btn-disable');
          val.html(countDown+'秒后重新发送');
          countDown--;
          if(countDown<0){
              isCounting = false;
              countDown = 60;
          }
      }else{
          val.removeAttr('disabled');
          val.removeClass('btn-disable');
          val.html('发送验证码');
          clearTimeout(t);
          return false;
      }
      t = setTimeout(function(){
          setTime(val);
      },1050);
    }

    $(function(){
        var $first = $('#first');
        var $loading = $('.loading');
        var phone = 0;
        var verify = 0;
        var pass = 0;
        var rePass = 0;
        var school_code = '';

        //btns click
        $('button').click(function(e){//prevent
            e.preventDefault();
        });

        function get_school_code(name) {
            var school_code = name
            var dot_pos = name.indexOf(".");
            if (dot_pos != -1) {
                admin = name.substring(dot_pos+1);
                if (admin == "admin") {
                    school_code = school_code.substring(0, dot_pos);
                } else {
                    school_code = false;
                }
            }
            return school_code;
        }

        $('#sendVerify').click(function(e){
            var name = $('#sCode').val();
            var $this = $(this);
            var pReg = new RegExp('^[0-9]{11}$');
            phone = $('#phone').val();

            if(name==''){
                kalert('请输入机构代码！');
                return false;
            }
            school_code = get_school_code(name);
            if(!school_code){
                kalert('机构不存在。<br/>如需找回老师账号密码，请联系管理员');
                return false;
            }
            if(phone == ''){
                kalert('请输入手机号！');
                return false;
            }

            if(!pReg.test(phone)){
                kalert('输入的手机号码不符合规范！');
                return false;
            }
            
            $loading.css('display','block');
            
            $.post('/school/check_school_code_phone_and_send_vcode',{'school_code':school_code,'phone':phone},function(data){
                $loading.css('display','none');
                var d = JSON.parse(data);
                if(d.meta.code == 0){
                    isCounting = true;
                    setTime($this);
                }else{
                    if(d.meta.code == 1){
                        kalert('机构不存在。<br/>如需找回老师账号密码，请联系管理员')
                    }else{
                        kalert(d.meta.message)
                    }
                }
            })
        });

        function is_digit(char) {
            var pat = new RegExp('^[0-9]*$');
            return pat.test(char);
        }

        function is_alpha(char) {
            return ((char >= 'a' && char <= 'z') || (char >='A' && char <='Z'));
        }

        function valid_password(password) {
            if (password.length < 6 || password.length > 20) {
                return false;
            }

            if (password.indexOf(' ')!='-1'){
                return false;
            };

            for (var i = 0; i < password.length; i ++) {
                if (! (is_digit(password[i]) || is_alpha(password[i]))) {
                    return false;
                }
            }

            return true;
        }

        $('#done').click(function(e){
            var name = $('#sCode').val();
            verify = $.trim($('#verify').val());
            pass = $('#pass').val();
            rePass = $('#rePass').val();
            school_code = get_school_code(name);
            phone = $('#phone').val();
            if(verify==''||pass==''||rePass==''||school_code==''||phone==''){
                kalert('输入不能为空');
            }else{
                if(verify.length != 6 || !is_digit(verify)){
                    kalert('请输入正确的6位手机验证码');
                    return false;
                }
                if(pass!==rePass){
                    kalert('两次输入密码需相同');
                }else{
                    if (valid_password(pass)) {
                        $loading.css('display','block');
                        $.post('/school/check_vcode_and_reset_password',{
                            'school_code': school_code,
                            'vcode': verify,
                            'phone': phone,
                            'password': pass
                        },function(data){
                            $loading.css('display','none');
                            var d = JSON.parse(data);
                            if(d.meta.code == 0){
                                kalert('重置成功！');
                                setTimeout(function(){
                                    location.href='/school/login';
                                },2000)     
                            }else{  
                                kalert(d.meta.message);
                            }
                        });
                    } else {
                        kalert("密码仅能由数字或大小写字母组成，且长度大于等于6小于等于20！");
                    }
                }
            }
        });

        $('#cancel').click(function(){
            location.href='/school/login'
        });

        //alert-warning
        $(".alert-warning").each(function( index ) {
            if(index !=0 ){
                $(this).hide()
            }
        });
     });
</script>
{% endblock %}
